<template>
	<view class="box">
		<view class="content">
			<view class="current-title">
				<view class="title-img">
					<image v-if="patient_info.avatar" :src="patient_info.avatar" mode="aspectFill"></image>
					<image v-else src="@/static/images/f.png" mode=""></image>
				</view>
				<view class="name">{{patient_info.name}}</view>
			</view>

			<view class="current-content">
				<text>{{inquiryDetail.describe}}</text>
				<view class="content-img-box" v-if="inquiryDetail.pic && inquiryDetail.pic.length>0">
					<view class="content-img" v-for="(item,index) in inquiryDetail.pic">
						<image :src="item" mode="aspectFill" @click="clickImg(inquiryDetail.pic,index)"></image>
					</view>
				</view>
			</view>
			
			<view class="guid-content" v-if="inquiryDetail.is_guide == 1">
				需要指导用药
			</view>
			
			<view class="current-footer">
				<view class="footer-left">
					发布于{{inquiryDetail.create_time}}
				</view>
				<view class="footer-right">
					诊金￥{{inquiryDetail.pay_price}}
				</view>
			</view>
		</view>

		<view class="xq">
			<view class="xq-title">问诊详情</view>

			<view class="list-box" v-if="itemList.length>0">
				<view class="list-item" v-for="(item,index) in itemList">
					<view class="xq-content1" :class="item.chat_identity == 0 ? 'user-bg':'doctor-bg' ">
						<view class="content1-row">
							<view class="content1-row1">
								<image v-if="item.avatar" :src="item.avatar" mode="aspectFill"></image>
								<image v-else src="@/static/images/f.png" mode=""></image>
								<view class="row1">{{item.name}}</view>
								<view class="row2" v-if="item.chief" >{{item.chief}}</view>
							</view>
							<view class="content1-row2">{{item.create_time}}</view>
						</view>
						<view class="content1-reply">{{item.content}}</view>
						<!-- 图片 -->
						<view class="content-img-box" v-if="item.pic && item.pic.length>0">
							<view class="content-img" v-for="(picItem,index) in item.pic">
								<image :src="picItem" mode="aspectFill" @click="clickImg(item.pic,index)"></image>
							</view>
						</view>
					</view>
				</view>

				<view class='loadingicon acea-row row-center-wrapper' @click="clickMore">
					<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
				</view>
			</view>
			<view class="nodata" v-else>
				<emptyPage title="暂无数据～"></emptyPage>
			</view>
		</view>
		<view :class="(uploadImg.length > 0) ? 'footer-safe-img':'footer-safe'"></view>
		<view class="footer" :class="conversation_status == 1?'tool-hidden':'' ">
			<view v-if="isDoctor != true" class="close" @click="clickEnd">
				<text class="yyfont yy-jieshu"></text>结束问诊回复
			</view>
			
			<view v-if="uploadImg.length > 0" class="img-area-box">
				<scroll-view class="show-img-box" scroll-x="true">
					<view class="show-content-img" v-for="(item,index) in uploadImg">
						<image :src="item" mode="aspectFill" @click="clickImg(uploadImg,index)"></image>
						<view class="del" @click="deleteImg(index)">
							<text class="iconfont icon-guanbi1"></text>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<view class="fabiao">
				<text @click="uploadpic" class="iconfont icon-tupian2"></text>
				<view class="input">
					<input v-model="contentDes" placeholder="你想说的话..." placeholder-class="placeholder" @input="inputChange"  @focus="focus" @blur="blur" @keyboardheightchange="keyboardheightchange"/>
				</view>
				<button @click="sendQuestion">发表</button>
			</view>
			<view class="yy-safe-bh safe-bg" :class="keyActive?'safe-hidden':''"> </view>
		</view>
		<!-- 评价 -->
		<inquiry-evaluate :show="showEvaluate" :conversationId="conversation_id" @close="evaluateClose"></inquiry-evaluate>
	
	</view>
</template>

<script>
	import emptyPage from '@/components/emptyPage.vue';
	import {
		endConsultation,
		inquiryDetail,
		getPicTextList,
		addPicTextList,
		endDoctorConsultation
	} from '@/api/inquiry.js';
	import {
		mapGetters
	} from "vuex";
	import inquiryEvaluate from '@/components/inquiryEvaluate.vue'
	export default {
		components:{
			inquiryEvaluate,
			emptyPage
		},
		computed: {
			...mapGetters(['userInfo', 'uid','routeError'])
		},
		data() {
			return {
				conversation_id: '',
				conversation_status:0,//0-进行中 1-已完成
				inquiryDetail:{},	// 问诊详情
				patient_info:{},	// 患者详情
				where:{'page':1,'limit':20},
				loadTitle: '加载更多',
				loading: false,
				loadend: false,
				itemList: [],
				contentDes:'',
				showEvaluate:false,
				keyActive:false,
				// rk_预留
				doc_mer_id:'',
				// 是否含图片
				haveImg:false,
				uploadImg: [],
				isDoctor:false,
			}
		},
		onLoad(ops) {
			
			if(this.routeError) {
				this.$store.commit('GO_ERROR');
				return
			}
			
			if (!ops || !ops.conversation_id) {
				return this.$util.Tips({
					title: '缺少会话信息'
				})
			}
			this.conversation_id = ops.conversation_id;
			this.conversation_status = ops.conversation_status || 0;
			this.doc_mer_id = ops.mer_id;
			if(ops.role && ops.role == 'doctor'){
				this.isDoctor = true;
				//console.log("rk===>[isDoctor]");
			}
			// 详情信息
			this.getInquiryDetail();
			// 问诊记录
			this.getList();

		},
		onPullDownRefresh() {
			console.log('rk==>refresh')
			this.loadend = false;
			this.where.page = 1;
			this.clickMore();
		},
		onReachBottom() {
			this.clickMore();
		},
		methods: {
			/**
			 * 图片预览
			 */
			clickImg(urls,idx){
				wx.previewImage({
					urls: urls,
					current: idx,
					success: function(res){},
					fail: function(res){},
					complate: function(res){}
				})
			},
			/**
			 * 详情
			 */
			getInquiryDetail(){
				let where = {
					'conversation_id':this.conversation_id
				}
				inquiryDetail(where).then(res => {
					//console.log('rk==>[res]'+JSON.stringify(res));
					this.inquiryDetail = res.data;
					this.patient_info = this.inquiryDetail.patient_info;
				});
			},
			/**
			 * 更多
			 */
			clickMore() {
				if (this.loadend) {
					uni.stopPullDownRefresh();
					return
				}
				this.getList();
			},
			/**
			 * 列表
			 */
			getList() {
				let that = this;
				that.where.conversation_id = this.conversation_id;
				getPicTextList(that.where).then(res => {
					uni.stopPullDownRefresh();
			
					if(that.where.page == 1){
						that.itemList = [];
					}
					let resList = res.data.list;
					let allCount = res.data.count;
					that.itemList = that.$util.SplitArray(resList, that.itemList);
					that.$set(that, 'itemList', that.itemList);
					let loadend = that.itemList.length >= allCount;
			
					//console.log('rk==>[xx]'+allCount + '[xx]'+that.itemList.length+'[bool]'+loadend);
			
					that.loadend = loadend;
					that.loadTitle = loadend ? '我也是有底线的' : '加载更多';
					that.where.page += 1;
					that.loading = false;
				});
			},
			/**
			 * 发布问题
			 */
			sendQuestion(){
				if(this.contentDes.length<=0 && this.uploadImg.length<=0){
					return this.$util.Tips({
						title:'请输入你想要提问的问题或图片'
					});
				}
				
				let picJosn = '';
				if (this.uploadImg.length > 0) {
					picJosn = encodeURIComponent(JSON.stringify(this.uploadImg));
				}
				
				let where = {
					'conversation_id':this.conversation_id,
					'chat_identity':(this.isDoctor?'1':'0'),
					'content':this.contentDes,
					'pic':picJosn,
				}
				let that = this
				addPicTextList(where).then(res => {
					
					if(that.isDoctor){
						let flag = res.data.flag;
						if(flag == 1){
							that.doctorEnd();
						}
					}
					
					that.contentDes = '';
					that.uploadImg = [];
					that.where.page = 1;
					that.getList();
				}).catch(err => {
					that.$util.Tips({
						title: err
					});
				});
			},
			/**
			 * 医生静默结束
			 */
			doctorEnd(){
				let where = {
					'conversation_id': this.conversation_id,
					'type':'1'
				};
				endDoctorConsultation(where).then(res => {
					this.$util.Tips({
						title: res.message
					});
					if (res.status == 200){
						setTimeout(()=>{
							uni.navigateBack()
						},1500);
					}
				}).catch(res => {
					this.$util.Tips({
						title: res
					});
				});
			},
			/**
			 * 结束问诊【用户】
			 */
			clickEnd() {
				
				let that = this;
				uni.showModal({
					title: '提示',
					content: '是否结束问诊?',
					success: function(res) {
						if (res.confirm) {
							that.stopChat();
						} else if (res.cancel) {
							console.log('fouding')
						}
					}
				});
			},
			stopChat(){
				let that = this;
				let where = {
					'conversation_id': this.conversation_id
				};
				endConsultation(where).then(res => {
					//console.log('rk==>[end]' + JSON.stringify(res));
					if (res.status == 200) {
						that.showEvaluate = true;
					}else{
						that.$util.Tips({
							title: res.message,
						});
					}
					
				});
			},
			/**
			 * 评价相关
			 */
			evaluateClose(){
				this.showEvaluate = false;
				uni.navigateBack();
			},
			/**
			 * 键盘
			 */
			inputChange(){
				this.keyActive = true;
				//console.log('rk==>[inputChange]'+this.keyActive)
			
			},
			focus() {
				setTimeout(()=>{
					this.keyActive = true;
					//console.log('rk==>[focus]'+this.keyActive)
				},250);
			},
			blur(){
				this.keyActive = false;
				//console.log('rk==>[blur]'+this.keyActive)
			},
			keyboardheightchange(e){
				//console.log('rk==>[change]'+JSON.stringify(e.detail))
			},
			
			/**
			 * 上传文件
			 * 
			 */
			uploadpic: function() {
				let that = this;
				that.$util.uploadImageOne('upload/image', function(res) {
					console.log('rk==>[上传]' + JSON.stringify(res));
					that.uploadImg.push(res.data.path);
					that.$set(that, 'uploadImg', that.uploadImg);
				});
			},
			/**
			 * 删除图片
			 */
			deleteImg(index) {
				this.uploadImg.splice(index, 1)
			},
			
			
		},

	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4
	}

	.content {
		background-color: #fff;
		padding: 20rpx 30rpx;
		margin: 40rpx 20rpx;

		.current-title {
			display: flex;
			flex-direction: row;
			justify-content: start;
			align-items: center;

			.title-img {
				width: 80rpx;
				height: 80rpx;
				background-color: blue;
				border-radius: 50%;
				margin-right: 10rpx;
				overflow: hidden;
			}
			.name {
				font-size: $yy-title-big-font;
				font-weight: bold;
				margin-left: 10rpx;
			}
			image {
				width: 100%;
				height: 100%;
			}

		}

		.current-content {
			padding-top: 10rpx;

			text {
				font-size: 26rpx;
				color: #000;
			}
		}
		.guid-content {
			margin: 20rpx 0 0 0;
			font-weight: bold;
		}
		
		
		
		.current-footer {
			padding-top: 30rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			color: #999;
		}
	}

	.content-img-box {
		display: flex;
		flex-wrap: wrap;
		.content-img {
			position: relative;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			margin: 30rpx 0rpx 20rpx 0;
			width: 33%;
			height: 158rpx;
	
			image {
				width: 158rpx;
				height: 158rpx;
			}
			&:nth-child(3n) {
				margin-right: 0;
			}
		}
	}

	.xq {
		margin: -20rpx 30rpx;
		margin-bottom: 200rpx;

		.xq-title {
			color: #36cf89;
		}
		.user-bg {
			background-color: #fff;
		}
		.doctor-bg {
			background-color: #f2f6ff;
		}
		.xq-content1 {
			margin-top: 20rpx;
			padding: 10rpx 10rpx;

			.content1-row {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				padding: 15rpx 10rpx;

				.content1-row1 {
					display: flex;
					flex-direction: row;
					align-items: center;

					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						background-color: #36cf89;
					}

					.row1 {
						font-weight: 600;
						padding-left: 20rpx;
					}

					.row2 {
						font-size: 20rpx;
						color: #999;
						padding-left: 10rpx;
					}
				}

				.content1-row2 {
					font-size: 20rpx;
				}
			}

			.content1-reply {
				color: #999;
				font-size: 26rpx;
				padding: 10rpx 10rpx;
			}
		}
	}
	.tool-hidden {
		display: none;
	}
	.footer {
		position: fixed;
		bottom: 0;
		width: 100%;

		.close {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #ff1717;
			height: 50rpx;
			width: 200rpx;
			color: #fff;
			font-size: 24rpx;
			border-radius: 10rpx;
			margin-bottom: 15rpx;
		}

		.img-area-box {
			background-color: #fff;
			height: 130rpx;
			width: 100%;
			.show-img-box {
				width: 750rpx;
				height: 100%;
				white-space: nowrap;
				display: flex;
				padding-left: 10rpx;
				.show-content-img {
					position: relative;
					.del {
						position: absolute;
						top: -10rpx;
						right: 0;
					}
					
					display: inline-block;
					margin: 15rpx 0rpx 0rpx 0;
					width: 115rpx;
					height: 115rpx;
					image {
						width: 90%;
						height: 90%;
					}
				}
			}
		}

		.fabiao {
			width: 100%;
			height: 100rpx;
			display: flex;
			flex-direction: row;
			background-color: #e2e2e2;
			align-items: center;
			justify-content: space-evenly;
			
			.iconfont {
				font-size: 66rpx;
			}
			.input {
				width: 70%;
				background-color: #fff;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 40rpx;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				padding: 0 30rpx;

				input {
					width: 100%;
					height: 100%;
				}
			}

			button {
				width: 15%;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 50rpx;
				font-size: 26rpx;
				background-color: #36cf89;
				color: #fff;

			}
		}

	}
	.footer-safe {
		height: calc(170rpx + constant(safe-area-inset-bottom));
		height: calc(170rpx + env(safe-area-inset-bottom));
	}
	.footer-safe-img {
		height: calc(300rpx + constant(safe-area-inset-bottom));
		height: calc(300rpx + env(safe-area-inset-bottom));
	}
	.safe-bg {
		background-color: #e2e2e2;
	}
	.safe-hidden {
		display: none;
	}
</style>
